<template>
  <div>
    <div style="margin-bottom: 10px; font-size: 14px; font-weight: 250; margin-left: 10px">
      <el-icon><Notebook /></el-icon>
      个人信息
    </div>
    <el-card>
      <el-form :model="data.student" style="width: 100%;">
        <el-form-item label="学号" prop="username">
          <el-input disabled v-model="data.student.username" />
        </el-form-item>
        <el-form-item label="学院" prop="department">
          <el-input v-model="data.student.departmentName" disabled />
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="data.student.majorName" disabled />
        </el-form-item>
        <el-form-item label="班级" prop="class">
          <el-input v-model="data.student.className" disabled />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="data.student.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="data.student.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
              v-model="data.student.birthday"
              type="date"
              placeholder="请选择你的生日"
          />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="data.student.sex">
            <el-radio value="男" label="男"></el-radio>
            <el-radio value="女" label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <div style="text-align: center">
          <el-button type="primary" style="width: 300px; padding: 20px" @click="updateUser">更新个人信息</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const formRef = ref()

const emit = defineEmits(["updateStudent"])

const data = reactive({
  student: JSON.parse(localStorage.getItem("student")),
})

const updateUser = () => {
    request.put("student/updateInfo", data.student).then(res => {
      if(res.code === "200") {
        ElMessage.success("更新成功")
        localStorage.setItem("student", JSON.stringify(data.student))
        emit("updateStudent")
      } else {
        ElMessage.error(res.msg)
      }
    })
}
</script>